{{- /* Desktop header */ -}}
<header class="desktop print:!tw-hidden" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="{{ .Site.Home.RelPermalink }}" title="{{ .Site.Title }}">
                {{- with .Site.Params.header.title -}}
                {{- with .logo -}}
                {{- dict "Src" . "Class" "tw-inline tw-align-text-bottom tw-mr-1" "Height" "32" "Width" "32" | partial "plugin/image.html" -}} {{- end -}}
                {{- with .pre -}}
                <span class="tw-mr-1">{{ . | safeHTML }}</span>
                {{- end -}}
                {{- if .typeit -}}
                {{- $id := dict "Content" .name "Scratch" $.Scratch "Id" "desktop-header-typeit" | partial
                "function/id.html" -}}
                <span id="{{ $id }}" class="typeit"></span>
                {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
                {{- else -}}
                {{- .name -}}
                {{- end -}}
                {{- with .post -}}
                <span class="tw-mr-1">{{ . | safeHTML }}</span>
                {{- end -}}
                {{- else -}}
                {{- .Site.Title -}}
                {{- end -}}
            </a>
        </div>
        <div class="menu">
            <div class="menu-inner">
                {{- range .Site.Menus.main -}}
                {{- $url := .URL | relLangURL -}}
                {{- with .Page -}}
                {{- $url = .RelPermalink -}}
                {{- end -}}
                <a class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}"
                    href="{{ $url }}" {{ with .Title }} title="{{ . }}" {{ end }}{{ if (urls.Parse $url).Host }}
                    rel="noopener noreferrer" target="_blank" {{ end }}>
                    {{- .Pre | safeHTML }} {{ .Name }} {{ .Post | safeHTML -}}
                </a>
                {{- end -}}
                {{- if .Site.Menus.main -}}
                <span class="menu-item delimiter"></span>
                {{- end -}}
                {{- if .Site.IsMultiLingual -}}
                <button class="menu-item language" {{ printf "aria-label=%q" (T "selectLanguage") | safeHTMLAttr }}>
                    {{- .Language.LanguageName -}}
                    {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "chevron-right") }}
                    <select class="language-select" {{ printf "aria-label=%q" (T "selectLanguage") | safeHTMLAttr }} id="language-select-desktop"
                        onchange="location = this.value;">
                        {{- if eq .Kind "404" -}}
                        {{- /* https://github.com/dillonzq/LoveIt/issues/378 */ -}}
                        {{- range .Sites -}}
                        {{- $link := printf "%v/404.html" .LanguagePrefix -}}
                        <option value="{{ $link }}" {{ if eq . $.Site }} selected{{ end }}>
                            {{- .Language.LanguageName -}}
                        </option>
                        {{- end -}}
                        {{- else -}}
                        {{- range .AllTranslations -}}
                        <option value="{{ .RelPermalink }}" {{ if eq .Lang $.Lang }} selected{{ end }}>
                            {{- .Language.LanguageName -}}
                        </option>
                        {{- end -}}
                        {{- end -}}
                    </select>
                </button>
                {{- end -}}
                {{- if .Site.Params.search.enable -}}
                <span class="menu-item search" id="search-desktop">
                    <input type="text"
                        placeholder="{{ .Site.Params.search.placeholder | default (T `searchPlaceholder`) }}"
                        id="search-input-desktop">
                    <button class="search-button search-toggle" id="search-toggle-desktop" title="{{ T `search` }}">
                        {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "search") }}
                    </button>
                    <button class="search-button search-clear" id="search-clear-desktop" title="{{ T `clear` }}">
                        {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "times-circle") }}
                    </button>
                    <span class="search-button search-loading tw-animate-spin" id="search-loading-desktop">
                        {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "spinner") }}
                    </span>
                </span>
                {{- end -}}
                {{- if eq .Site.Params.header.themeChangeMode "select" -}}
                <button class="menu-item theme-select" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
                    {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "adjust") }}
                    <select class="color-theme-select" id="theme-select-desktop" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
                        <option value="light">{{ T "Light" }}</option>
                        <option value="dark">{{ T "Dark" }}</option>
                        <option value="auto">{{ T "Auto" }}</option>
                    </select>
                </button>
                {{- else -}}
                <button class="menu-item theme-switch" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
                    {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "adjust") }}
                </button>
                {{- end -}}
            </div>
        </div>
    </div>
</header>

{{- /* Mobile header */ -}}
<header class="mobile print:!tw-hidden" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="{{ .Site.Home.RelPermalink }}" title="{{ .Site.Title }}">
                    {{- with .Site.Params.header.title -}}
                    {{- with .logo -}}
                    {{- dict "Src" . "Class" "tw-inline tw-align-text-bottom tw-mr-1" "Height" "32" "Width" "32" | partial "plugin/image.html" -}}
                    {{- end -}}
                    {{- with .pre -}}
                    <span class="tw-mr-1">{{ . | safeHTML }}</span>
                    {{- end -}}
                    {{- if .typeit -}}
                    {{- $id := dict "Content" .name "Scratch" $.Scratch "Id" "mobile-header-typeit" | partial
                    "function/id.html" -}}
                    <span id="{{ $id }}" class="typeit"></span>
                    {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this"
                    -}}
                    {{- else -}}
                    {{- .name -}}
                    {{- end -}}
                    {{- with .post -}}
                    <span class="tw-mr-1">{{ . | safeHTML }}</span>
                    {{- end -}}
                    {{- else -}}
                    {{- .Site.Title -}}
                    {{- end -}}
                </a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile">
            {{- if .Site.Params.search.enable -}}
            <div class="search-wrapper">
                <div class="search mobile" id="search-mobile">
                    <input type="text"
                        placeholder="{{ .Site.Params.search.placeholder | default (T `searchPlaceholder`) }}"
                        id="search-input-mobile">
                    <button class="search-button search-toggle tw-h-10" id="search-toggle-mobile" title="{{ T `search` }}">
                        {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "search") }}
                    </button>
                    <button class="search-button search-clear" id="search-clear-mobile" title="{{ T `clear` }}">
                        {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "times-circle") }}
                    </button>
                    <span class="search-button search-loading tw-animate-spin" id="search-loading-mobile">
                        {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "spinner") }}
                    </span>
                </div>
                <button class="search-cancel" id="search-cancel-mobile">
                    {{ T `cancel` }}
                </button>
            </div>
            {{- end -}}
            {{- $currentPage := . -}}
            {{- range .Site.Menus.main -}}
            {{- $url := .URL | relLangURL -}}
            {{- with .Page -}}
            {{- $url = .RelPermalink -}}
            {{- end -}}
            <a class="menu-item" href="{{ $url }}" title="{{ .Title }}" {{ if (urls.Parse $url).Host }}
                rel="noopener noreferrer" target="_blank" {{ end }}>
                {{- .Pre | safeHTML }}{{ .Name }}{{ .Post | safeHTML -}}
            </a>
            {{- end -}}
            {{- if eq .Site.Params.header.themeChangeMode "select" -}}
            <button class="menu-item theme-select tw-w-full" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
                {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "adjust") }}
                <select class="color-theme-select" id="theme-select-mobile" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
                    <option value="light">{{ T "Light" }}</option>
                    <option value="dark">{{ T "Dark" }}</option>
                    <option value="auto">{{ T "Auto" }}</option>
                </select>
            </button>
            {{- else -}}
            <button class="menu-item theme-switch tw-w-full" {{ printf "aria-label=%q" (T "switchTheme") | safeHTMLAttr }}>
                {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "adjust") }}
            </button>
            {{- end -}}
            {{- if .Site.IsMultiLingual -}}
            <button class="menu-item tw-w-full" title="{{ T " selectLanguage" }}">
                {{- .Language.LanguageName -}}
                {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "chevron-right") }}
                <select class="language-select" title="{{ T " selectLanguage" }}" onchange="location = this.value;">
                    {{- if eq .Kind "404" -}}
                    {{- /* https://github.com/dillonzq/LoveIt/issues/378 */ -}}
                    {{- range .Sites -}}
                    {{- $link := printf "%v/404.html" .LanguagePrefix -}}
                    <option value="{{ $link }}" {{ if eq . $.Site }} selected{{ end }}>
                        {{- .Language.LanguageName -}}
                    </option>
                    {{- end -}}
                    {{- else -}}
                    {{- range .AllTranslations -}}
                    <option value="{{ .RelPermalink }}" {{ if eq .Lang $.Lang }} selected{{ end }}>
                        {{- .Language.LanguageName -}}
                    </option>
                    {{- end -}}
                    {{- end -}}
                </select>
            </button>
            {{- end -}}
        </div>
    </div>
</header>
<div class="search-dropdown desktop">
    <div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
    <div id="search-dropdown-mobile"></div>
</div>